<!DOCTYPE html>
<html>
<head>
    <title>Eyer WebAssembly WebGL</title>
    <script src="./wasm-arrays.js"></script>
    <script src="./EyerColorSpace.js"></script>
    <script>
        var isInit = false;

        var canvas = null;

        window.addEventListener("wasmLoaded", function(){
            console.log("js log: wasm loaded\n");

            var id = "gl_canvas_id";
            var width = window.screen.width;
            var height = window.screen.height;
            width = 1280;
            height = 720;

            canvas = document.createElement("canvas");
            canvas.id = id;
            canvas.width = width;
            canvas.height = height;

            document.getElementById("canvasContainer").appendChild(canvas);
            const context = canvas.getContext("webgl2", {antialias: true, stencil: true});

            const idBuffer = Module._malloc(id.length + 1);
            Module.stringToUTF8(id, idBuffer, id.length + 1);
            Module.ccall("createContext", null, ["number", "number", "number"], [width, height, idBuffer]);

            Module.ccall("start", null, ["number", "number"], [width, height]);
            // 启动定时器
            var timer = setInterval(update, 10);

            isInit = true;

            // Module.ccall("setTimeRange", null, ["number", "number"], [0, 20]);





            canvas.onmousemove = function (event){
                if(isInit){
                    var x = event.clientX;
                    var y = event.clientY;

                    Module.ccall("onmouse", null, ["number", "number"], [x, y]);
                }
            }

            canvas.onmousedown = function (event){
                if(isInit){
                    Module.ccall("onmousedown", null, ["number"], [0]);
                }
            }
            canvas.onmouseup = function (event){
                if(isInit){
                    Module.ccall("onmouseup", null, ["number"], [0]);
                }
            }

            canvas.onmouseover = function (event){
                if(isInit){
                    Module.ccall("onmouseover", null, ["number"], [0]);
                }
            }
            canvas.onmouseout = function (event){
                if(isInit){
                    Module.ccall("onmouseout", null, ["number"], [0]);
                }
            }
        });

        function update(){
            Module.ccall("update", null, [], []);
        }

    </script>
</head>
<body style="margin: 0px">
    <div id="canvasContainer"></div>

    <script>
        var boxDiv = document.getElementById("canvasContainer");

        document.onkeydown = function(e)
        {
            var keycode = e.keyCode;
            if(isInit){
                Module.ccall("onkeydown", null, ["number"], [keycode]);
            }
        }

        document.onkeyup = function(e) {
            var keycode = e.keyCode;
            if(isInit){
                Module.ccall("onkeyup", null, ["number"], [keycode]);
            }
        }
    </script>
</body>
</html>